<template>
  <div class="page-content">
    <div class="h2">客户管理</div>
    <div class="padding bg-white mb flex-row">
      <div class="flex1">
        <a-form layout="inline" :model="searchState" @finish="toSearch">
          <a-form-item name="keyword">
            <a-input v-model:value="searchState.keyword" placeholder="名称" />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button @click="reset" v-if="search">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
      <a-space>
        <a-button type="primary" @click="toAdd">新增</a-button>
        <a-button @click="refresh">刷新</a-button>
      </a-space>
    </div>
    <a-table :loading="loading" :columns="columns" :data-source="rows" :pagination="pagination" bordered>
      <template #bodyCell="{ column, record, index }">

        <template v-if="column.dataIndex === 'avatarUrl'">
          <img :src="record.avatarUrl || '/images/avatar.jpg'" width="80px" />
        </template>
        <template v-if="column.key === 'location'">
          {{ record.country + record.province + record.city }}
        </template>

        <template v-if="column.key === 'action'">
          <a-space>
            <!-- <a @click="toDetail(record)">详情</a> -->
            <a @click="handleEdit(record)">编辑</a>
            <a @click="handleRemove(record)" class="text-red">删除</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>

  <ClientDrawer v-if="modal == 'drawer'" :item="crtItem" @close="onCancel" @saved="onSaved" />
  <!-- <ItemDetail v-if="modal == 'detail'" :id="crtItem ? crtItem.id : null" @close="onCancel" /> -->
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { listClient, removeClient } from '@/api/client'
import ClientDrawer from '@/components/ClientDrawer.vue';
// import ClientDetail from '@/components/ClientDetail.vue';

import { confirm } from '@/mixin'

const modal = ref(null)
const crtItem = ref(null)
const search = ref(false)
const loading = ref(false)
const rows = ref([])
const searchState = reactive({})
const pagination = reactive({
  pageSize: 10,
  current: 1,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共${total}条`,
  onChange: (page, size) => {
    pagination.pageSize = size
    load(page)
  }
})

const columns = [
  {
    title: '头像',
    dataIndex: 'avatarUrl',
    width: 112,
  },
  {
    title: 'openid',
    dataIndex: 'openid',
    width: 230,
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    width: 120,
  },
  {
    title: '电话',
    dataIndex: 'purePhoneNumber',
    width: 160,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '地区',
    key: 'location',
  },
  {
    title: '操作',
    key: 'action',
    width: 140
  },
]



onMounted(() => {
  load(1)
})
const reset = () => {
  searchState.keyword = null
  search.value = false
  load(1)
}
const toSearch = () => {
  search.value = true;
  load(1)
}

const load = async (page = 1) => {
  const params = {
    page,
    size: pagination.pageSize,
  }
  if (search.value) {
    for (const key in searchState) {
      const val = searchState[key]
      if (val) {
        params[key] = val;
      }
    }
  }
  loading.value = true;
  const res = await listClient(params);
  loading.value = false;
  if (res.data) {
    const { total, records } = res.data;
    pagination.total = total
    pagination.current = page
    rows.value = records
  }
}
const toAdd = () => {
  crtItem.value = null
  modal.value = 'drawer'
}
const refresh = () => {
  load(pagination.current)
}
const onCancel = () => {
  modal.value = null
}

const handleEdit = item => {
  crtItem.value = item
  modal.value = 'drawer'
}

const toDetail = (item) => {
  crtItem.value = item
  modal.value = 'detail'
}

// 删除
const handleRemove = item => {
  confirm(`您确定要删除【${item.name || item.nickname || item.openid}】吗？`, async () => {
    const res = await removeClient(item.id)
    if (res.data) {
      message.success('删除成功')
      load(pagination.current)
    }
  })
}
const onSaved = () => {
  onCancel()
  if (crtItem.value) {
    refresh()
  } else {
    load(1)
  }
}
</script>

<style lang="less" scoped></style>